// 侧边栏背景颜色
@siderBgColor: {
    background: #001529 !important;
}

:global {

    #root,
    body,
    html {
        min-width: 1400px; // 设置最小宽度，确保响应式布局
        height: 100%;
    }

    .ant-layout {
        display: flex;
        width: 100%;
        min-height: 100%;
    }
}

.menuStyle {
    @siderBgColor();
    color: #9cb7af;

    :global {
        .ant-menu-item {
            width: 100%;
            height: 50px;
            margin: 4px 0;
            padding: 0 30px !important;
            border-radius: 0;
        }

        .ant-menu-item-selected {
            span {
                color: #fff;
            }

            background-color: #566b77 !important;
            border-radius: 0;
        }

        .ant-menu-item-active {
            span {
                color: #fff !important;
            }

            background-color: #9cb7af;
            border-radius: 0 !important;
        }

        .ant-menu-title-content {
            flex: none !important;
            width: 120px;
        }

        .ant-badge {
            width: 102px;
            color: #9cb7af;
        }
    }
}

// 退出按钮
.exit {
    position: absolute;
    right: 0;
}

// 侧边栏头部图标
.headerIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80px;
    font-size: 17px;
    color: #fff;
    letter-spacing: 1px;
    white-space: nowrap; // 确保文字不换行
    overflow: hidden; // 隐藏溢出的内容
    text-overflow: ellipsis; // 如果文字过长则显示省略号

    :global {
        .ant-space-item {
            width: auto; // 设置宽度自适应，避免文字被强制拉伸
        }
    }
}

:global {
    .ant-layout-sider {
        @siderBgColor();
    }

    .ant-descriptions-header {
        margin-bottom: 2px !important;
    }

    .ant-descriptions-item {
        padding-bottom: 2px !important;

        .ant-descriptions-item-content {
            transform: translateX(-2px);
        }
    }
}

// 响应式布局样式
@media (max-width: 768px) {
    .headerIcon {
        font-size: 14px; // 调整文字大小以适应更小的侧边栏
        padding: 0 10px; // 调整内边距，避免文字被截断
    }

    .ant-layout-sider {
        width: 200px !important; // 在小屏幕上设置侧边栏宽度
    }

    .ant-layout-sider-collapsed {
        width: 70px !important; // 折叠状态下的小屏幕宽度
    }
}